<template>
	<view class="">
		<NavBar :title="orderDetail.orderStatus" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}" v-if="isPageShow">
		<view class="main">
			<view class="main_sec m_b_90">
				<view class="m_b_42" style="text-align: center;">
					<text class="f_30_0_b">
						{{orderDetail.orderStatus}}
					</text>
				</view>
				<view class="m_b_12">
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							订单编号：{{orderDetail.order_no}}
						</text>
					</view>
					<view class="" style="width: 620rpx;">
						<text class="f_26_0">
							送货地址：{{orderDetail.delivery_address}}
						</text>
					</view>
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							收货联系人：{{orderDetail.contact_name}}
						</text>
					</view>
					<view class="" style="width: 620rpx;">
						<text class="f_26_0 u-line-1">
							联系电话：{{orderDetail.contact_phone}}
						</text>
					</view>
				</view>
				<view class="">
					<text class="f_28_0" style="color: #3665FF;">
						{{orderDetail.orderStatus}}
					</text>
				</view>
				<view class="">
					
					<text class="f_26_0" style="color: #8C8E91;">
						下单日期：{{orderDetail.create_time}}
					</text>
				</view>
			</view>
			<view class="submit_btn">
				<up-button throttleTime="1000" @click="onComplete1" v-if="orderDetail.order_status == 1">
					<text class="f_28_f">
						下达给采购员
					</text>
				</up-button>
			</view>
			<view class="submit_btn">
				<up-button throttleTime="1000" @click="onComplete" v-if="orderDetail.order_status == 6">
					<text class="f_28_f">
						点击完成
					</text>
				</up-button>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	const oId = ref()
	const isPageShow = ref(false)
	onLoad((e) => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 100}rpx)`
			}
		});
		oId.value = e.id
		form.value.order_id = e.id
		getOrderDetail()
	})
	const orderDetail = ref({ orderStatus: '' })
	const getOrderDetail = async () => {
		let res = await proxy.$http('salesMan.getOrderDetail', { order_id: oId.value })
		if (res.code == 1) {
			orderDetail.value = res.data
			isPageShow.value = true
		}
	}
	const onComplete = () => {
		cgDeal2()
	}
	const onComplete1 = () => {
		cgzgDeal1()
	}
	const imgForm = ref({
		fileList1: [],
		fileList2: []
	})
	const form = ref({
		order_id: '',
		courier_number: '',
		express_company: '',
		purchase_contract_images: '',
		invoice_mark_images: '',
		shoukuan_company: '',
		shoukuan_account: ''
	})
	const deletePic = (event) => {
		let fileList = imgForm.value[`fileList${event.name}`]
		fileList.splice(event.index, 1);
	};
	// 新增图片
	const afterRead = async (event) => {
		let fileList = imgForm.value[`fileList${event.name}`]
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.length;
		lists.map((item) => {
			fileList.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			console.log(result);
			let item = fileList[fileListLen];
			fileList.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: proxy.$config.baseUrl + '/api/common/upload',
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data.fullurl);
					}, 1000);
				},
			});
		});
	};

	const cgzgDeal1 = async () => {
		let params = JSON.parse(JSON.stringify(form.value))
		let res = await proxy.$http('purchaserManager.cgzgDeal1', { ...params })
		uni.hideLoading()
		if (res.code == 1) {
			uni.$u.toast('提交成功')
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		}
	}

	const cgDeal2 = async () => {
		let params = JSON.parse(JSON.stringify(form.value))

		if (imgForm.value.fileList1.length == 0) {
			uni.$u.toast('采购合同不能为空')
			return
		}
		if (imgForm.value.fileList2.length == 0) {
			uni.$u.toast('发票标志不能为空')
			return
		}
		if (!form.value.express_company) {
			uni.$u.toast('收款单位不能为空')
			return
		}
		if (!form.value.express_company) {
			uni.$u.toast('收款账号不能为空')
			return
		}
		if (!form.value.express_company) {
			uni.$u.toast('快递公司不能为空')
			return
		}
		if (!form.value.express_company) {
			uni.$u.toast('快递单号不能为空')
			return
		}
		imgForm.value.fileList1.forEach((v, index) => {
			if (index == 0) {
				params.purchase_contract_images += v.url
			} else {
				params.purchase_contract_images += ',' + v.url
			}
		})
		imgForm.value.fileList2.forEach((v, index) => {
			if (index == 0) {
				params.invoice_mark_images += v.url
			} else {
				params.invoice_mark_images += ',' + v.url
			}
		})
		uni.showLoading({
			title: "上传中"
		})
		let res = await proxy.$http('purchaser.cgDeal2', { ...params })
		uni.hideLoading()
		if (res.code == 1) {
			uni.$u.toast('提交成功')
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		}
	}
	const previewImage = (e, index) => {
		uni.previewImage({
			urls: [e], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
			current: index, // 当前显示图片的http链接，默认是第一个
			success: function (res) { },
			fail: function (res) { },
			complete: function (res) { },
		})
	};
</script>
<style lang="scss" scoped>
	.content {
		background: #F2F2F2;
		padding: 32rpx 20rpx;
		padding-bottom: 64rpx;

		.main {
			.main_sec {
				width: 654rpx;
				padding: 28rpx;
				padding-top: 40rpx;
				background: #FFFFFF;
				box-shadow: 2rpx 6rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
				border-radius: 10rpx;
				border: 1px solid #EDEDEE;

				.sec_detail {
					width: 626rpx;
					padding: 20rpx;
					background: #F6F8FE;
					border-radius: 5rpx;
				}

				.form_box {
					.form_input {
						width: 604rpx;
						height: 80rpx;
						padding: 0 22rpx;
						background: #FFFFFF;
						box-shadow: 2rpx 6rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
						border-radius: 10rpx;
						border: 1px solid #EDEDEE;
						display: flex;
						align-items: center;
					}
				}
			}
		}

	}

	.upload_box {
		width: 192rpx;
		height: 175rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		border: 1px solid #E4E4E5;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>